<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%response.setHeader("cache-control","public"); %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/common.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/practice/test-system.css">
    <script src="<%=path%>/static/js/respond.js"></script>
    <script src="<%=path%>/static/js/practice/textarea.js"></script>
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='<%=path%>/static/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
    </script>
    <!-- <![endif]-->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='<%=path%>/static/js/jquery-1.9.1.min.js'>" + "<" + "/script>");
    </script>

    <script src="<%=path%>/static/js/practice/time.js"></script>
    <script src="<%=path%>/static/js/bootstrap.min.js"></script>

</head>
<body>
<!--head begin-->
<div class="headbg position_fixed">
    <div class="container header">
        <div class="navheader">
            <div class="nav-title">
                在线模拟考试
            </div>
            <div class="nav-right">
                <span class="numc" id="nowNum">1/</span>
                <span class="numtitle">${singlecount+judgecount+muticount}题</span>
                <a href="javascript:void(0);" onclick="answerDetail()" type="button" class="answer_panel"
                   data-toggle="modal" data-target="#dtmb"><span>答题面板</span><i
                        class="glyphicon glyphicon-triangle-bottom"></i></a>
                <div class="border-right"></div>
                <input type="text" class="showTime">
                <!-- Button trigger modal -->
                <div class="border-right-none"></div>
                <button type="button" class="btn btn-default btn-lg overtest" onclick="paperSubmit()">
                    <i class="glyphicon glyphicon-open gameover"></i>
                    <span>交卷</span>
                </button>
            </div>
        </div>
    </div>
</div>
<!--head end-->
<!--body begin-->
<!--单选题 begin-->
<div class="container main">
    <c:forEach items="${singlelist}" var="question" varStatus="status">
        <div class="single-box"<c:if test="${status.count !=1}"> style="display: none;" </c:if>  >
            <div class="single-container">
                <div class="single-title">
                    <span class="font-title">单选题</span>
                    <span class="single_score">（${singlecount}道，每题${singlescore}分，共${singlecount*singlescore}分）</span>
                </div>
                <div class="confirm-top">
                    <a class="btn btn-default" href="javascript:void(0)" onclick="questionsDel()" role="button">上一题</a>
                    <a class="btn btn-info" href="javascript:void(0)" onclick="questionsAdd()" role="button">下一题</a>
                </div>
            </div>
            <div class="line"></div>
            <div class="single-main">
                <input type="text" style="display:none" value="${question.question_id}">
                <p>${status.count}. ${question.title}</p>
                <p>
                    <c:if test="${not empty question.picture && !(question.picture eq null) }">
                        <img style="width: 150px; height: 150px;" src="<%=basePath %>${question.picture}">
                    </c:if>
                </p>
            </div>
            <div class="choose-box">
                <div class="radio">
                    <label class="choose">
                        <input type="radio" name="${question.question_id}" <c:if test="${question.answer=='A'}"> checked="checked"</c:if> value="${question.a}">
                        <c:choose>
                            <c:when test="${not empty question.apic && !(question.apic eq null) }">
                                <p><span>A</span>&nbsp;${question.a}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.apic}">
                            </c:when>
                            <c:otherwise>
                                <p><span>A</span>&nbsp;${question.a}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="radio">
                    <label class="choose">
                        <input type="radio" name="${question.question_id}" <c:if test="${question.answer=='B'}"> checked="checked"</c:if> value="${question.b}">
                        <c:choose>
                            <c:when test="${not empty question.bpic && !(question.bpic eq null) }">
                                <p><span>B</span>&nbsp;${question.b}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.bpic}">
                            </c:when>
                            <c:otherwise>
                                <p><span>B</span>&nbsp;${question.b}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="radio">
                    <label class="choose">
                        <input type="radio" name="${question.question_id}" <c:if test="${question.answer=='C'}"> checked="checked"</c:if> value="${question.c}">
                        <c:choose>
                            <c:when test="${not empty question.cpic && !(question.cpic eq null) }">
                                <p><span>C</span>&nbsp;${question.c}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.cpic}">
                            </c:when>
                            <c:otherwise>
                                <p><span>C</span>&nbsp;${question.c}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="radio">
                    <label class="choose">
                        <input type="radio" name="${question.question_id}" <c:if test="${question.answer=='D'}"> checked="checked"</c:if> value="${question.d}">
                        <c:choose>
                            <c:when test="${not empty question.dpic && !(question.dpic eq null) }">
                                <p><span>D</span>&nbsp;${question.d}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.dpic}">
                            </c:when>
                            <c:otherwise>
                                <p><span>D</span>&nbsp;${question.d}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
            </div>
        </div>
    </c:forEach>
    <!--单选题 end-->
    <!--多选题 begin-->
    <c:forEach items="${mutilist}" var="question" varStatus="status">
        <div class="single-box" style="display: none;">
            <div class="single-container">
                <div class="single-title">
                    <span class="font-title">多选题</span>
                    <span class="single_score">（${muticount}道，每题${mutiscore}分，共${muticount*mutiscore}分）</span>
                </div>
                <div class="confirm-top">
                    <a class="btn btn-default" href="javascript:void(0)" onclick="questionsDel()" role="button">上一题</a>
                    <a class="btn btn-info" href="javascript:void(0)" onclick="questionsAdd()" role="button">下一题</a>
                </div>
            </div>
            <div class="line">
                <input type="text" style="display:none" value="2">
            </div>
            <div class="single-main">
                <input type="text" style="display:none" value="${question.question_id}">
                <p>${status.count + singlecount}. ${question.title}</p>
                <p>
                    <c:if test="${not empty question.picture && !(question.picture eq null) }">
                        <img style="width: 150px; height: 150px;" src="<%=basePath %>${question.picture}">
                    </c:if>
                </p>
            </div>
            <div class="choose-box">
                <div class="checkbox">
                    <label class="choose" style="margin-bottom: 16px;">
                        <input type="checkbox" style="margin-left: 0;"<c:if test="${fn:contains(question.answer,'A')}"> checked="checked"</c:if> value="${question.a}">
                        <c:choose>
                            <c:when test="${not empty question.apic && !(question.apic eq null) }">
                                <p><span>A</span>&nbsp;${question.a}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.apic }">
                            </c:when>
                            <c:otherwise>
                                <p><span>A</span>&nbsp;${question.a}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="checkbox">
                    <label class="choose" style="margin-bottom: 16px;">
                        <input type="checkbox" style="margin-left: 0;"<c:if test="${fn:contains(question.answer,'B')}"> checked="checked"</c:if> value="${question.b}">
                        <c:choose>
                            <c:when test="${not empty question.bpic && !(question.bpic eq null) }">
                                <p><span>B</span>&nbsp;${question.b}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.bpic }">
                            </c:when>
                            <c:otherwise>
                                <p><span>B</span>&nbsp;${question.b}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="checkbox">
                    <label class="choose" style="margin-bottom: 16px;">
                        <input type="checkbox" style="margin-left: 0;"<c:if test="${fn:contains(question.answer,'C')}"> checked="checked"</c:if> value="${question.c}">
                        <c:choose>
                            <c:when test="${not empty question.cpic && !(question.cpic eq null) }">
                                <p><span>C</span>&nbsp;${question.c}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.cpic }">
                            </c:when>
                            <c:otherwise>
                                <p><span>C</span>&nbsp;${question.c}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="checkbox">
                    <label class="choose" style="margin-bottom: 16px;">
                        <input type="checkbox" style="margin-left: 0;"<c:if test="${fn:contains(question.answer,'D')}"> checked="checked"</c:if> value="${question.d}">
                        <c:choose>
                            <c:when test="${not empty question.dpic && !(question.dpic eq null) }">
                                <p><span>D</span>&nbsp;${question.d}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.dpic }">
                            </c:when>
                            <c:otherwise>
                                <p><span>D</span>&nbsp;${question.d}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
            </div>
        </div>
    </c:forEach>
    <!--判断题 begin-->
    <c:forEach items="${judgelist}" var="question" varStatus="status">
        <div class="single-box" style="display: none;">
            <div class="single-container">
                <div class="single-title">
                    <span class="font-title">判断题</span>
                    <span class="single_score">（${judgecount}道，每题${judgescore}分，共${judgecount*judgescore}分）</span>
                </div>
                <div class="confirm-top">
                    <a class="btn btn-default" href="javascript:void(0)" onclick="questionsDel()" role="button">上一题</a>
                    <a class="btn btn-info" href="javascript:void(0)" onclick="questionsAdd()" role="button">下一题</a>
                </div>
            </div>
            <div class="line"></div>
            <div class="single-main">
                <input type="text" style="display:none" value="${question.question_id}">
                <p>${status.count + singlecount + judgecount}. ${question.title}</p>
                <p>
                    <c:if test="${not empty question.picture && !(question.picture eq null) }">
                        <img style="width: 150px; height: 150px;" src="<%=basePath %>${question.picture}">
                    </c:if>
                </p>
            </div>
            <div class="choose-box">
                <div class="radio">
                    <label class="choose">
                        <input type="radio" name="${question.question_id}" <c:if test="${question.answer=='A'}"> checked="checked"</c:if> value="${question.a}">
                        <c:choose>
                            <c:when test="${not empty question.apic && !(question.apic eq null) }">
                                <p><span>A</span>&nbsp;${question.a}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.apic}">
                            </c:when>
                            <c:otherwise>
                                <p><span>A</span>&nbsp;${question.a}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
                <div class="radio">
                    <label class="choose">
                        <input type="radio" name="${question.question_id}" <c:if test="${question.answer=='B'}"> checked="checked"</c:if> value="${question.b}">
                        <c:choose>
                            <c:when test="${not empty question.bpic && !(question.bpic eq null) }">
                                <p><span>B</span>&nbsp;${question.b}</p>
                                <img style="width: 120px; height: 120px;" src="<%=basePath %>${question.bpic}">
                            </c:when>
                            <c:otherwise>
                                <p><span>B</span>&nbsp;${question.b}</p>
                            </c:otherwise>
                        </c:choose>
                    </label>
                </div>
            </div>
        </div>
    </c:forEach>
    <!--判断题 end-->
    <!--多选题 end-->
    <div class="confirm">
        <a class="btn btn-default" href="javascript:void(0)" onclick="questionsDel()" role="button">上一题</a>
        <a class="btn btn-info" href="javascript:void(0)" onclick="questionsAdd()" role="button">下一题</a>
    </div>
</div>
<!--body end-->

<!--footer begin-->
<!--footer end-->
</body>
<!-- 提交弹出框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog mtk-box" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-tip" id="myModalLabelTip">考试提示：</h4>
            </div>
            <div class="modal-body bigbox">
                <p class="text-over">未做题目<span id="questions">&nbsp;${questions}&nbsp;</span>道；</p>
                <p class="text-over">您确认现在交卷么？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default">取消</button>
                <a type="button" class="btn btn-info" href ="#" onclick ="doPost()"><i class="glyphicon glyphicon-open"></i>确认交卷</a>
            </div>
        </div>
    </div>
</div>
<!-- 提交弹出框 -->
<!-- 答题面板 -->
<div class="modal fade" id="dtmb" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog mtk-box" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title text-tip" id="myModalLabel">&nbsp;</h4>
            </div>
            <div class="modal-body bigbox">
                <ul>
                    <li class="pdtbox border-bottom">
                        <p class="margin-top">单项选择题（${singlecount}道，每题${singlescore}分）</p>
                        <div class="title_num">
                            <div id="singleDiv"></div>
                        </div>
                    </li>

                    <li class="pdtbox border-bottom">
                        <p class="margin-top">多项选择题（${muticount}道，每题${mutiscore}分）</p>
                        <div class="title_num">
                            <div id="mutiDiv"></div>
                        </div>
                    </li>

                    <li class="pdtbox border-bottom">
                        <p>判断题（${judgecount}道，每题${judgescore}分）</p>
                        <div class="title_num">
                            <div id="judgeDiv"></div>
                        </div>
                    </li>
                </ul>
                <div class="mb_tip">
                    <a class="btn btn-success">&nbsp;</a>
                    <span>已做</span>
                    <a class="btn btn-default">&nbsp;</a>
                    <span>未做</span>
                    <a class="btn btn-primary">&nbsp;</a>
                    <span>当前</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 答题面板 -->
<script src="<%=path%>/static/js/practice/test-system.js"></script>
<script type="text/javascript">

    $(function () {
        $("[data-toggle='popover']").popover();
    });

    var paperid = '${paperid}';
    var userid = '${userid}';

    function doPost() {
        //点击确定后操作
        var myForm = document.createElement("form");
        myForm.method = "post";
        myForm.action = "calculation";
        var paperidInput = document.createElement("input");
        var useridInput = document.createElement("input");

        paperidInput.setAttribute("name", "paperid");  // 为input对象设置name
        paperidInput.setAttribute("value", paperid);  // 为input对象设置value

        useridInput.setAttribute("name", "user_id");  // 为input对象设置name
        useridInput.setAttribute("value", userid);  // 为input对象设置value

        myForm.appendChild(paperidInput);
        myForm.appendChild(useridInput);
        document.body.appendChild(myForm);
        myForm.submit();
        document.body.removeChild(myForm);  // 提交后移除创建的form
    }



    function answerDetail() {
        var paperid = '${paperid}';
        $.ajax({
            url: '<%=basePath%>practice/answerDetail/',
            data: {
                paper_id: paperid
            },
            dataType: "json",
            success: function (data) {
                var arr = data;
                var num = 0;
                var singleDiv = "";
                var judgeDiv = "";
                var mutiDiv = "";
                var numNow = $("#nowNum").text();
                numNow = numNow.substr(0, numNow.length - 1);
                for (var i = 0; i < data[0].singleans.length; i++) {
                    num = num + 1;
                    if (numNow == num) {
                        singleDiv += "<a class='btn btn-primary' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                    } else {
                        if (data[0].singleans[i].answer == null || data[0].singleans[i].answer == "") {
                            singleDiv += "<a class='btn btn-default' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        } else {
                            singleDiv += "<a class='btn btn-success' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        }
                    }
                }

                for (var i = 0; i < data[0].mutians.length; i++) {
                    num = num + 1;
                    if (numNow == num) {
                        mutiDiv += "<a class='btn btn-primary' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                    } else {
                        if (data[0].mutians[i].answer == null || data[0].mutians[i].answer == "") {
                            mutiDiv += "<a class='btn btn-default' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        } else {
                            mutiDiv += "<a class='btn btn-success' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        }
                    }
                }

                for (var i = 0; i < data[0].judgeans.length; i++) {
                    num = num + 1;
                    if (numNow == num) {
                        judgeDiv += "<a class='btn btn-primary' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                    } else {
                        if (data[0].judgeans[i].answer == null || data[0].judgeans[i].answer == "") {
                            judgeDiv += "<a class='btn btn-default' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        } else {
                            judgeDiv += "<a class='btn btn-success' href='javascript:void(0);' onclick='toQuestion(" + num + ")'>" + num + "</a>";
                        }
                    }
                }

                $("#singleDiv").html(singleDiv);
                $("#judgeDiv").html(judgeDiv);
                $("#mutiDiv").html(mutiDiv);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("error");
            }
        });
    };

    function toQuestion(id) {
        num = id - 1;
        $('#dtmb').modal('hide');
        $('#nowNum').text(id + "/");
        var nums = $(".main .single-box").length;

        for (var i = 0; i < nums; i++) {

            if (i == id-1) {
                $(".main").children().eq(i).css("display", "block");
            } else {
                $(".main").children().eq(i).css("display", "none");
            }
        }
        footer_position();
    }

    //打开模态窗口
    $('#dtmb').modal({backdrop: 'static', keyboard: false, show: false});
    function paperSubmit() {
        var examid = '${examid}';
        var paperid = '${paperid}';
        var userid = '${userid}';
        $.ajax({
            url: '<%=basePath%>practice/paperWarnning',
            data: {
                paperid: paperid,
            },
            dataType: "json",
            success: function (data) {
                $('#questions').text(data.count);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                BootstrapDialog.confirm({
                    title : '提示',
                    message : '系统错误',
                    size : BootstrapDialog.SIZE_SMALL,
                    type : BootstrapDialog.TYPE_DEFAULT,
                    closable : true,
                    btnCancelLabel : '取消',
                    btnOKLabel : '确定'
                });
            }
        });
        //打开模态框
        $('#myModal').modal();
    }

</script>
</html>
